/*html{-webkit-text-size-adjust:none;font-size: 10px;}*/
html, body {
	height: 100%;
	/*font-size: 10px;*/
}
.swiper-container-v {
	width: 100%;
	max-width: 768px;
	height: 100%;
}

.swiper-container-v .swiper-slide {
	width: 100%;
	height: 100%;
	background-size: 100% 100%;
	color: blueviolet;
	font-size: 100px;
	text-align: center;
}
.swiper-container-v>.swiper-wrapper>.swiper-slide {
	background: url(../img/bg.jpg);
}
/*第一页****************************************************第一页*******/
.drem {
	position: relative;
	width: 70%;
	height: 40%;
	margin: 20% auto;
	z-index: 5;
}
.drem img {
	position: absolute;
}
.drem img:nth-child(1) {
	top: 0;
	left: 0;
	height: 100%;
	animation: slideInLeft 1s;
}
.drem img:nth-child(2) {
	top: 25%;
	left: 25%;
	height: 50%;
	animation: slideInDown 1s;
}
.drem img:nth-child(3) {
	top: 0;
	left: 0;
	width: 100%;
	animation: slideInDown 1s;
}
.drem img:nth-child(4) {
	bottom: 0;
	left: 0;
	width: 100%;
	animation: slideInUp 1s;
}
.drem img:nth-child(5) {
	left: 40%;
	width: 25%;
	animation: slideInDown 1s;
}
.drem img:nth-child(6) {
	left: 53%;
	width: 12%;
	animation: slideInDown 1s;
}
.drem img:nth-child(7) {
	left: 25%;
	bottom: 0;
	width: 75%;
	animation: slideInUp 1s;
}
.drem img:nth-child(8) {
	left: 0;
	top: 34%;
	height: 33%;
	animation: slideInDown 1s;
}
.drem img:nth-child(9) {
	left: 5%;
	top: 38%;
	height: 25%;
	/*用两个动画,实现先隐藏 后动画显示*/
	animation: hiden 1s, zoomInHang 1s 1s;
}
.drem img:nth-child(10) {
	left: 25%;
	top: 34%;
	height: 66%;
	opacity: 0;
	/*利用动画结束停留在最后一帧 css 中opcity: 0;  最后一帧opcity: 1;*/
	animation: zoomInHang 1s 1.2s forwards;
}
.drem img:nth-child(11) {
	top: 39%;
	left: 30%;
	height: 10%;
	animation: slideInDown 1s;
}
.drem img:nth-child(12) {
	top: 34%;
	left: 40%;
	width: 13%;
	animation: hiden 1.4s, zoomInHang 1s 1.4s;
}
.drem img:nth-child(13) {
	top: 34%;
	left: 53%;
	width: 47%;
	animation: hiden 1.6s, zoomInHang 1s 1.6s;
}
.drem img:nth-child(14) {
	right: 0;
	bottom: 0;
	width: 70%;
	animation: hiden 1.8s, zoomInHang 1s 1.8s;
}
.maker {
	width: 100%;
	height: 30%;
	position: relative;
}
.maker img {position: absolute;}
.maker img:nth-child(1) {
	width: 70%;
	left: 15%;
	top: 40%;
	z-index: 10;
	animation:hiden 2.8s, zoomIn 1s 2.8s;
}
.maker img:nth-child(2) {
	left: 0;
	height: 90%;
	animation: hiden 3.8s, hangDown 1s 3.8s;
}
.maker img:nth-child(3) {
	right: 0;
	height: 130%;
	animation: hiden 3.8s, hangUp 1s 3.8s;
}
.page-one {position: relative;}
.page-one>img {position: absolute;}
.page-one>img:nth-of-type(1) {
	top: 35px;
	left: -130px;
	animation: l2 2s linear infinite;
}
.page-one>img:nth-of-type(2) {
	bottom: 100px;
	right: -130px;
	animation: l1 2s linear infinite;
}
.page-one>img:nth-of-type(3) {
	bottom: 25px;
	left: -200px;
	animation: l3 2s linear infinite;
}
@keyframes l2{
	from{transform: translate3d(300%, 300%, 0);}
	to{transform: translate3d(0, 0, 0);}
}
@keyframes l1{
	from{transform: translate3d(-300%, -300%, 0);}
	to{transform: translate3d(0, 0, 0);}
}
@keyframes l3{
	from{transform: translate3d(300%, -300%, 0);}
	to{transform: translate3d(0, 0, 0);}
}
@keyframes hiden{
	from{opacity: 0;}
	to{opacity: 0;}
}
@keyframes hangDown{
	from{transform: translate3d(-200%, -200%, 0);}
	to{transform: translate3d(0, 0, 0);}
}
@keyframes hangUp{
	from{transform: translate3d(200%, 200%, 0);}
	to{transform: translate3d(0, 0, 0);}
}
@keyframes slideInDown {
  from {
    -webkit-transform: translate3d(200%, -200%, 0);
    transform: translate3d(200%, -200%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
/*修改animate.css 中 zoomIn 的 keyframes的源码*/
@keyframes zoomInHang {
  from {
    opacity: 0;
    -webkit-transform: scale3d(3, 3, 3);
    transform: scale3d(3, 3, 3);
  }
  to {
    opacity: 1;
  }
}
/*第二页********************************************************第二页*****/
.page-two {position: relative;}
.page-two>img {position: absolute;}
.page-two>img:nth-child(1) {
	width: 100%;
	top: -5%;
	left: 0;
}
.page-two>img:nth-child(2) {
	width: 70%;
	top: 75%;
	left: 15%;
	/*animation: fadeInRight 1s;*/
}
.page-two>img:nth-child(3) {
	width: 100%;
	top: 83%;
	left: 0;
	/*animation: fadeInLeft 1s;*/
}
/*第三页*********************************************************第三页*****/
.page-three {position: relative;}
.page-three img {position: absolute;}
.page-three img:nth-child(1) {
	top: 10%;
	left: 55%;
	animation: floatHang1 6s infinite;
}
.page-three img:nth-child(2) {
	top: 30%;
	left: 5%;
	animation: floatHang 6s 3s infinite;
}
.page-three img:nth-child(3) {
	top: 40%;
	left: 40%;
	animation: floatHang 8s infinite;
}
.page-three img:nth-child(4) {
	top: 55%;
	left: 5%;
	animation: floatHang1 4s infinite;
}
.page-three img:nth-child(5) {
	top: 70%;
	left: 45%;
	animation: floatHang 6s infinite;
}
.page-three img:nth-child(6) {
	top: 8%;
	left: 20%;
	width: 13%;
	animation: floatHang 4s infinite;
}
.page-three img:nth-child(7) {
	top: 30%;
	left: 80%;
	animation: floatHang 10s infinite;
}
.page-three img:nth-child(8) {
	top: 80%;
	left: 20%;
	animation: floatHang1 8s infinite;
}
@keyframes floatHang1{
	from{transform: translate3d(0, 0, 0) rotateZ(0);}
	50%{transform: translate3d(1.5%,-1.5%,0) rotateZ(10deg);}
	to{transform: translate3d(0,0,0) rotateZ(0);}
}
@keyframes floatHang{
	from{transform: translateY(0);}
	50%{transform: translateY(-10%);}
	to{transform: translateY(0);}
}
/*第四页******************************************************第四页******/

#bg {position: relative;width: 100%; height: 100%; display: none;}
.content {position: relative; width: 100%;height: 100%;/*background: url(../img/bg.jpg);z-index: 100;*/}
/*******js操作 display 属性 和水平swiper 切换*****/
/*.content{display: none;}*/
.content img {position: absolute;}
.content img:nth-of-type(1) {
	width: 85%;
	height: 90%;
	left: 6%;
	top: 2%;
	/*animation: hiden 4s, zoomIn 2s 4s;*/
}
.content img:nth-of-type(2) {
	width: 110%;
	height: 110%;
	left: -10%;
	top: -2%;
	/*animation: hiden 2s, zoomIn 2s 2s;*/
}
.content img:nth-of-type(3) {
	width: 6%;
	left: 45.5%;
	top: 46%;
}
.person {
	padding: 0;
	margin: 0;
	list-style: none;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
.person li {
	position: absolute;
	width: 25%;
	height: 13.5%;
	border-radius: 50%;
	/*animation: hiden 2s, personHang 2s 2s;*/
}
.content .person>li>img {
	border-radius: 50%;
	width: 105%;
	height: 105%;
	margin-left: -6px;
	margin-top: -5px;
	/*animation: hiden 2s, personHang 2s 2s;*/
}
.person li:nth-child(1) {
	width: 20%;
	height: 11%;
	background:yellow;
	top: 12%;
	left: 30%;
}
.person li:nth-child(2) {
	background: lawngreen;
	top: 25%;
	left: 5%;
}
.person li:nth-child(3) {
	width: 20%;
	height: 11%;
	background: green;
	top: 50%;
	left: 10%;
}
.person li:nth-child(4) {
	width: 20%;
	height: 11%;
	background: lightskyblue;
	top: 63%;
	left: 15%;
}
.person li:nth-child(5) {
	width: 20%;
	height: 11%;
	background: palevioletred;
	top: 70%;
	left: 35%;
}
.person li:nth-child(6) {
	background: blue;
	top: 60%;
	left: 75%;
}
.person li:nth-child(7) {
	width: 20%;
	height: 11%;
	background: blue;
	top: 45%;
	left: 70%;
}
.person li:nth-child(8) {
	width: 20%;
	height: 11%;
	background: deeppink;
	top: 22%;
	left: 75%;
}
.content .title {
	position: absolute;
	top: 35%;
	left: 33%;
	color: white;
	text-align: center;
	letter-spacing: .5rem;
}
.content .title>p {
	padding: 0;
	margin: 0;
}
.content .title>p:nth-child(1) {
	color: white;
	font-size: 22px;
	/*animation: bounceInLeft 2s;*/
}
.content .title>p:nth-child(2) {
	font-size: 20px;
	/*animation:hiden 1.5s, zoomIn .5s 1.5s;*/
}
.x {
	position: absolute;
	width: 15%;
	top: 8%;
	left: 5%;
	z-index: 50;
	display: none;
}
@keyframes personHang{
	from{
		opacity: 0;
		transform: scale3d(.1, .1, .1);
		left: 40%;
		top: 46%;
		}
	to{
		opacity: 1;
	}
}
@keyframes tapSmall{
	from{transform: scale3d(1, 1, 1);}
	to{transform: scale3d(.4, .4, .4);}
}
@keyframes tapBig{
	from{transform: scale3d(1, 1, 1)}
	to{transform: scale3d(2.5, 2.5, 2.5)}
}
/*第四页人物简介***************************第四页人物简介**水平swiper**/
.swiper-container-h {display: none;}
.swiper-container-h {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	/*border: 1px solid red;
	box-sizing: border-box;*/
}
.swiper-container-h>.swiper-slide {
	width: 100%;
	height: 100%;
}
.swiper-container-h img {
	position: absolute;
	left: 10%;
	top: 30%;
	width: 80%;
}
.swiper-button-next {background: url(../img/pagefour/right.png) no-repeat;}
.swiper-button-prev {background: url(../img/pagefour/left.png) no-repeat;}





/*footer***********************************************footer底部********/
.footer {
	position: fixed;
	width: 100%;
	max-width: 768px;
	bottom: 0;
	text-align: center;
	z-index: 10;
}
.footer img:first-child {
	margin-bottom: 3%;
	width: 10%;
	animation: slideOutUpHang 1s infinite;
}
.footer img:last-child {
	position: absolute;
	right: 3%;
	bottom: 1rem;
	animation: rotate 1s linear infinite;
}
@keyframes rotate{
	from{transform: rotate(0);}
	to{transform: rotate(360deg);}
}
@keyframes slideOutUpHang {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  50% {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  to {
  	-webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}






/*媒体查询 适配不同屏幕的尺寸*/
/*@media only screen and (max-width: 640px) {
	html{font-size: 9px;}
}
@media only screen and (max-width: 540px) {
	html{font-size: 8px;}
}
@media only screen and (max-width: 480px) {
	html{font-size: 7px;}
}
@media only screen and (max-width: 414px) {
	html{font-size: 6px;}
}
@media only screen and (max-width: 400px) {
	html{font-size: 5px;}
}
@media only screen and (max-width: 375px) {
	html{font-size: 4.5px;}
}*/

